<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dom-2 Test</title>
</head>
<body>
  <div class="grandma">
    grandma
    <div class="mother">
      mother
      <div class="daughter">
        daughter
        <div class="baby">
          baby
        </div>
      </div>
    </div>
  </div>  
</body>
<script>
  var grandma = document.getElementsByClassName('grandma')[0];  
  var mother = document.getElementsByClassName('mother')[0];  
  var daughter = document.getElementsByClassName('daughter')[0];  
  var baby = document.getElementsByClassName('baby')[0];  

  function theName () {
    console.log('My name is '+ this.className);
  }

  // 捕获比冒泡优先
  // 捕获是从外到里
  // 冒泡是从里到外

  // 冒泡
  baby.addEventListener(
    'click',
    theName,
    false
  );

  // 捕获
  daughter.addEventListener(
    'click',
    theName,
    true
  )

  // 捕获
  mother.addEventListener(
    'click',
    theName,
    true
  )

  // 冒泡
  grandma.onclick = theName;

</script>
<style>
  div {
    margin: 0 auto;
  }
  .grandma {
    background-color: darkcyan;
    text-align: center;
    color: white;
    height: 20rem;
    width: 20rem;
  }
  .mother {
    background-color: darkgoldenrod;
    height: 8rem;
    width: 16em;
  }
  .daughter {
    background-color: darkgray;
    height: 6rem;
    width: 12em;
  }
  .baby {
    background-color: darkgreen;
    height: 4rem;
    width: 8em;
  }
</style>
</html>